<template>
    <div>
        <div class="">
            <div class="shuju_tips color_f flex">
                <div class="mar_r20">店铺试用已到期，到期后店铺仍可访问，但店铺功能不可使用，建议尽快购买正式版本</div>
                <el-button size="medium">立即购买</el-button>
            </div>
        </div>
        <div class="body flex-bet flex-y-top shuju">
            <div class="flex-g-1">
                <div class="ba_f flex pad_tr_23 bor_rad5">
                    <div class="flex-g-0 t_l wid30 color_1d fon_16">
                        <div class="">下午好！</div>
                        <div class="mar_t10"> 欢迎登入后台管理系统</div>
                    </div>
                    <div class="flex-g-1 t_l wid70">
                        <div class="fon_16 color_1d">待办事项：</div>
                        <div class="flex mar_t10">
                            <div class="flex-g-1 flex">
                                <div>
                                    <span class="iconfont iconshanghu fon_14 mar_r5"></span>
                                    <span class="fon_14 color_9">待发货订单</span>
                                </div>
                                <div class="maincolor fon_14 marb_l15">2</div>
                            </div>
                            <div class="flex-g-1 flex">
                                <div>
                                    <span class="iconfont iconshanghu fon_14 mar_r5"></span>
                                    <span class="fon_14 color_9">待发货订单</span>
                                </div>
                                <div class="maincolor fon_14 marb_l15">2</div>
                            </div>
                            <div class="flex-g-1 flex">
                                <div>
                                    <span class="iconfont iconshanghu fon_14 mar_r5"></span>
                                    <span class="fon_14 color_9">待发货订单</span>
                                </div>
                                <div class="maincolor fon_14 marb_l15">2</div>
                            </div>
                            <div class="flex-g-1 flex">
                                <div>
                                    <span class="iconfont iconshanghu fon_14 mar_r5"></span>
                                    <span class="fon_14 color_9">待发货订单</span>
                                </div>
                                <div class="maincolor fon_14 marb_l15">2</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ba_f bor_rad5 mar_t20">
                    <div class="tit flex pad_20">
                        <div class="shuju_title">
                            <div class="shuju_title_text">
                                <span>实时概况</span>
                            </div>
                        </div>
                    </div>
                    <div class="tongji_con flex pad_tb_20">
                        <div class="flex-g-1">
                            <div class="flex flex-center">
                                <div class="title6 mar_l20">支付订单数(单)</div>
                                <div class="mar_l10 toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">支付订单数(单)</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="fon_30  title35 mar_t10 flex-center">365</div>
                            <div class="color_9 mar_t10 flex-center">昨日：211</div>
                        </div>
                        <div class="flex-g-1">
                            <div class="flex flex-center">
                                <div class="title6 mar_l20">支付金额(元)</div>
                                <div class="mar_l10 toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">支付金额(元)</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="fon_30 title35 mar_t10 color-green flex-center">2365</div>
                            <div class="color_9 mar_t10 flex-center">昨日：2011</div>
                        </div>
                        <div class="flex-g-1">
                            <div class="flex flex-center">
                                <div class="title6 mar_l20">今日支付人数(人)</div>
                                <div class="mar_l10 toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">今日支付人数(人)</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="fon_30 title35 mar_t10 flex-center">11</div>
                            <div class="color_9 mar_t10 flex-center">昨日：11</div>
                        </div>
                        <div class="flex-g-1">
                            <div class="flex flex-center">
                                <div class="title6 mar_l20">今日访客数(人)</div>
                                <div class="mar_l10 toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">今日访客数(人)</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="fon_30 title35 mar_t10 flex-center">138</div>
                            <div class="color_9 mar_t10 flex-center">昨日：145</div>
                        </div>
                        <div class="flex-g-1">
                            <div class="flex flex-center">
                                <div class="title6 mar_l20">维权订单(单)</div>
                                <div class="mar_l10 toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">维权订单(单)</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="fon_30 title35 mar_t10 color-red flex-center">8</div>
                            <div class="color_9 mar_t10 flex-center">昨日：9</div>
                        </div>
                        <div class="flex-g-1">
                            <div class="flex flex-center">
                                <div class="title6 mar_l20">总营业额(元)</div>
                                <div class="mar_l10 toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">总营业额(元)</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                            <div class="fon_30 title35 mar_t10 flex-center">1523658</div>
                            <div class="color_9 mar_t10 flex-center">昨日：1585585</div>
                        </div>
                    </div>
                </div>
                <div class="ba_f bor_rad5 mar_t20 pad_20">
                    <div class="shuju_title">
                        <div class="shuju_title_text">
                            <span>交易概况</span>
                        </div>
                    </div>
                    <div class="rel mar_20">
                        <div class="jiaoyi_bg">
                            <div class="pad_l_20">
                                <div class="flex">
                                    <div class="title35"> 访客数</div>
                                    <div class="toolTip mar_l10">
                                        <el-tooltip effect="dark" placement="top">
                                            <div slot="content">访客数</div>
                                            <button type="button"
                                                    class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                                <span><i class="el-icon-question"></i></span>
                                            </button>
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div>0 --</div>
                            </div>
                        </div>
                        <div class="jiaoyi_bg2 flex">
                            <div class="pad_l_20">
                                <div class="flex">
                                    <div class="title35"> 下单买家数</div>
                                    <div class="toolTip mar_l10">
                                        <el-tooltip effect="dark" placement="top">
                                            <div slot="content">下单买家数</div>
                                            <button type="button"
                                                    class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                                <span><i class="el-icon-question"></i></span>
                                            </button>
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div>0 --</div>
                            </div>
                            <div class="pad_l_20 mar_l20">
                                <div class="flex">
                                    <div class="title35">下单金额</div>
                                    <div class="toolTip mar_l10">
                                        <el-tooltip effect="dark" placement="top">
                                            <div slot="content">下单金额</div>
                                            <button type="button"
                                                    class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                                <span><i class="el-icon-question"></i></span>
                                            </button>
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div>0 --</div>
                            </div>
                        </div>
                        <div class="jiaoyi_bg3 flex">
                            <div class="pad_l_20">
                                <div class="flex">
                                    <div class="title35">支付买家数</div>
                                    <div class="toolTip mar_l10">
                                        <el-tooltip effect="dark" placement="top">
                                            <div slot="content">支付买家数</div>
                                            <button type="button"
                                                    class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                                <span><i class="el-icon-question"></i></span>
                                            </button>
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div>0 --</div>
                            </div>
                            <div class="pad_l_20 mar_l20">
                                <div class="flex">
                                    <div class="title35">支付金额</div>
                                    <div class="toolTip mar_l10">
                                        <el-tooltip effect="dark" placement="top">
                                            <div slot="content">支付金额</div>
                                            <button type="button"
                                                    class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                                <span><i class="el-icon-question"></i></span>
                                            </button>
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div>0 --</div>
                            </div>
                            <div class="pad_l_20 mar_l20">
                                <div class="flex">
                                    <div class="title35">客单价</div>
                                    <div class="toolTip mar_l10">
                                        <el-tooltip effect="dark" placement="top">
                                            <div slot="content">客单价</div>
                                            <button type="button"
                                                    class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                                <span><i class="el-icon-question"></i></span>
                                            </button>
                                        </el-tooltip>
                                    </div>
                                </div>
                                <div>0 --</div>
                            </div>
                        </div>
                        <div class="jiaoyi_tu ab">
                            <div class="pic"></div>
                        </div>
                    </div>
                    <div>
                        <div id="mainEch" style="height: 360px" class="mar_t20"></div>
                    </div>
                </div>
                <div class="ba_f bor_rad5 mar_t20 pad_20">
                    <div class="shuju_title">
                        <div class="shuju_title_text">
                            <span>用户概况</span>
                        </div>
                    </div>
                    <div class="main-icon flex t_l mar_t20">
                        <div class="flex-1 t_l pad_20 bortColor">
                            <div class="flex-bet flex-y-top">
                                <div>
                                    <p class="title6 fon_14">新增用户</p>
                                    <p class="fon_30 title35 lh16 pad_tb_20">0</p>
                                    <p class="fon_12 title6 lh25">较前一天 --</p>
                                </div>
                                <div class="toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">新增用户</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 t_l pad_20 bortColor">
                            <div class="flex-bet flex-y-top">
                                <div>
                                    <p class="title6 fon_14">活跃用户</p>
                                    <p class="fon_30 title35 lh16 pad_tb_20">0</p>
                                    <p class="fon_12 title6 lh25">较前一天 --</p>
                                </div>
                                <div class="toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">活跃用户</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 t_l pad_20 bortColor">
                            <div class="flex-bet flex-y-top">
                                <div>
                                    <p class="title6 fon_14">累计用户</p>
                                    <p class="fon_30 title35 lh16 pad_tb_20">0</p>
                                    <p class="fon_12 title6 lh25">较前一天 --</p>
                                </div>
                                <div class="toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">累计用户</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 t_l pad_20 bortColor">
                            <div class="flex-bet flex-y-top">
                                <div>
                                    <p class="title6 fon_14">付费用户</p>
                                    <p class="fon_30 title35 lh16 pad_tb_20">0</p>
                                    <p class="fon_12 title6 lh25">较前一天 --</p>
                                </div>
                                <div class="toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">付费用户</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 t_l pad_20 bortColor">
                            <div class="flex-bet flex-y-top">
                                <div>
                                    <p class="title6 fon_14">累计付费用户</p>
                                    <p class="fon_30 title35 lh16 pad_tb_20">0</p>
                                    <p class="fon_12 title6 lh25">较前一天 --</p>
                                </div>
                                <div class="toolTip">
                                    <el-tooltip effect="dark" placement="top">
                                        <div slot="content">累计付费用户</div>
                                        <button type="button"
                                                class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                                            <span><i class="el-icon-question"></i></span>
                                        </button>
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="mainEch2" style="height: 360px" class="mar_t20"></div>
                </div>
                <div class="ba_f bor_rad5 mar_t20 pad_20">
                    <div class="shuju_title">
                        <div class="shuju_title_text">
                            <span>常用功能</span>
                        </div>
                    </div>
                    <div class="flex pad_10 t_l mar_t10">
                        <div class="fon_14 flex-g-1">
                            <span class="iconfont iconshanghu fon_16"></span>
                            发布商品
                        </div>
                        <div class="fon_14 flex-g-1">
                            <span class="iconfont iconshanghu fon_16"></span>
                            销售员
                        </div>
                        <div class="fon_14 flex-g-1">
                            <span class="iconfont iconshanghu fon_16"></span>
                            多网点
                        </div>
                        <div class="fon_14 flex-g-1">
                            <span class="iconfont iconshanghu fon_16"></span>
                            小程序
                        </div>
                    </div>
                    <div class="flex pad_10 t_l">
                        <div class="fon_14 flex-g-1">
                            <span class="iconfont iconshanghu fon_16"></span>
                            微信公众号
                        </div>
                        <div class="fon_14 flex-g-1">
                            <span class="iconfont iconshanghu fon_16"></span>
                            收入/提现
                        </div>
                        <div class="fon_14 flex-g-1">
                            <span class="iconfont iconshanghu fon_16"></span>
                            智能客服
                        </div>
                        <div class="fon_14 flex-g-1">
                            <span class="iconfont iconshanghu fon_16"></span>
                            订单查询
                        </div>
                    </div>
                </div>
                <div class="ba_f pad_20 bor_rad5 mar_t20">
                    <div class="shuju_title">
                        <div class="shuju_title_text">
                            <span>最新推荐</span>
                        </div>
                    </div>
                    <div class="flex mar_t10">
                        <div class="flex-g-1 bor_rad5 color_f yb_color1 pad_20 mar_r20">
                            <div class="title6" style="color: #fff">微信小程序</div>
                            <div class="fon_12 mar_t5">抢占微信社交流量红利</div>
                        </div>
                        <div class="flex-g-1 bor_rad5 color_f yb_color2 pad_20 mar_r20">
                            <div class="title6" style="color: #fff">百度小程序</div>
                            <div class="fon_12 mar_t5">打造商家新官网</div>
                        </div>
                        <div class="flex-g-1 bor_rad5 color_f yb_color3 pad_20 mar_r20">
                            <div class="title6" style="color: #fff">支付宝小程序</div>
                            <div class="fon_12 mar_t5">一键上架，快速补充货源</div>
                        </div>
                        <div class="flex-g-1 bor_rad5 color_f yb_color4 pad_20">
                            <div class="title6" style="color: #fff">字节跳动小程序</div>
                            <div class="fon_12 mar_t5">裂变式营销玩法</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-g-0">
                <right-bar/>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import RightBar from '../../components/rightBar'

    export default {
        name: "Home",
        mounted() {
            this.init();
            this.init2();
        },
        data() {
            return {
                tableData: [
                    {
                        apply_image: '../../assets/img/index/je.png',
                        number: '1',
                        name: '云贝网络科技',
                        dj: '13',
                        xl: '2021',
                    }
                ],
                tableData2: [],
                echarts1_option1: {
                    color: ['#42CCF0', '#F5CC4E'],
                    title: {
                        // text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line',      // 默认为直线，可选为：'line' | 'shadow'
                            color: '#aaa',
                        }
                    },
                    legend: {
                        data: ['付费用户数', '下单金额']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#ACDF84',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: ['2020-8-17', '2020-8-16', '2020-8-15', '2020-8-14', '2020-8-13', '2020-8-12', '2020-8-11', '2020-8-11', '2020-8-11', '2020-8-11'],
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {    //网格线
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true //隐藏或显示
                        }
                    },
                    series: [
                        {
                            name: '付费用户数',
                            type: 'line',
                            stack: '总量',
                            data: [19, 11, 14, 22, 8, 17, 25, 5, 22, 8],
                            smooth: true
                        },
                        {
                            name: '下单金额',
                            type: 'line',
                            stack: '总量',
                            data: [22, 182, 12, 33, 45, 33, 47, 44, 4, 2],
                            smooth: true
                        },
                    ]
                },
                echarts1_option2: {
                    color: ['#2A75ED', '#FBD438'],
                    title: {
                        // text: '折线图堆叠'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'line',      // 默认为直线，可选为：'line' | 'shadow'
                            color: '#aaa',
                        }
                    },
                    legend: {
                        data: ['新增用户', '活跃用户']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        // 去除坐标轴上的刻度线
                        axisTick: {
                            show: false,
                            lineStyle: {
                                color: '#ccc',
                                type: 'dashed'
                            }
                        },
                        // x轴的字体样式
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        // x轴的颜色和宽度
                        axisLine: {
                            lineStyle: {
                                color: '#4ECB73',
                                width: 2,   //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        data: ['2020-8-17', '2020-8-16', '2020-8-15', '2020-8-14', '2020-8-13', '2020-8-12', '2020-8-11', '2020-8-11', '2020-8-11', '2020-8-11'],
                    },
                    yAxis: {
                        type: 'value',
                        axisTick: {       //y轴刻度线
                            "show": false
                        },
                        axisLine: {
                            "show": false,
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#333',
                                fontSize: '12'
                            }
                        },
                        splitLine: {    //网格线
                            lineStyle: {
                                type: 'dotted',
                                color: '#DDDDDD',
                            },
                            show: true //隐藏或显示
                        }
                    },
                    series: [
                        {
                            name: '新增用户',
                            type: 'line',
                            stack: '总量',
                            data: [23, 11, 63, 22, 33, 33, 44, 33, 22, 33],
                            smooth: true
                        },
                        {
                            name: '活跃用户',
                            type: 'line',
                            stack: '总量',
                            data: [22, 182, 191, 33, 23, 33, 310, 54, 4, 2],
                            smooth: true
                        },
                    ]
                },
            }
        },
        components: {
            RightBar
            // HelloWorld
        },
        methods: {
            init() {
                let myChart = echarts.init(document.getElementById('mainEch2'))
                myChart.setOption(this.echarts1_option2, true)
            },
            init2() {
                let myChart = echarts.init(document.getElementById('mainEch'))
                myChart.setOption(this.echarts1_option1, true)
            },
        }
    };
</script>
<style lang="scss" scoped>
    .shuju {
        font-family: PingFangSC, "Microsoft Yahei", Helvetica, Tahoma, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", STXihei, STHeiti, Heiti, SimSun, sans-serif !important;
    }

    .body {
        /*margin: 94px 20px 0 270px;*/
        /*margin-right: 240px;*/
        min-width: 900px;
        height: 100%;
    }

    .marb_l15 {
        margin-left: 15%;
    }

    .yb_imgw {
        width: 66px;
        height: 66px;
    }

    .yb_color1 {
        background-color: #44B07D
    }

    .yb_color2 {
        background-color: #288CDB
    }

    .yb_color3 {
        background-color: #676EC6
    }

    .yb_color4 {
        background-color: #CE5B3F
    }

    .namelogo {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    /*position: absolute;*/
    /*top: 92Px;*/
    /*left: 270Px;*/
    /*right: 300Px;*/
    /*min-width: 800Px;*/
    /*height: 100vh;*/
    .title6 {
        color: #666;
        font-size: 14px;
    }

    .title35 {
        color: #353535;
    }

    .shuju_tips {
        background-color: #EE4141;
        align-items: center;
        padding: 0 20px;
        margin-bottom: 20px;
        width: 100%;
        height: 56px;
    }

    .toolTip .el-button--text {
        color: #B9B9CC;
    }

    .bortColor {
        border: 1px solid #eee;
    }

    .bortColor1 {
        border-top: 4px solid #1890FF;
    }

    .bortColor2 {
        border-top: 4px solid #2FC25B;
    }

    .bortColor3 {
        border-top: 4px solid #FCDB69;
    }

    .bortColor4 {
        border-top: 4px solid #F4667C;
    }

    .bortColor5 {
        border-top: 4px solid #EBA675;
    }

    .jiaoyi_bg {
        height: 100px;
        background: rgba(42, 117, 237, 0.06);
    }

    .jiaoyi_bg2 {
        height: 100px;
        background: rgba(42, 117, 237, 0.04);
    }

    .jiaoyi_bg3 {
        height: 100px;
        background: rgba(42, 117, 237, 0.02);
    }

    .jiaoyi_tu {
        right: 20px;
        top: 30px;
        height: 100%;
        width: 460px;
    }

    .jiaoyi_tu .pic {
        position: absolute;
        top: 20px;
        right: 20px;
        bottom: 0;
        height: 240px;
        background-image: url(../../assets/img/index/charts.png);
        background-size: 100% 100%;
        width: 100%;
        z-index: 999;
    }
</style>
